<template>
  <el-row class="home" :gutter="20">
    <el-col :span="24" style="margin-top: 20px">
      <!--shadow属性设置卡片阴影出现的时机-->
      <el-card shadow='hover'>
        <div class="user">
          <img :src="userInfo.avatar"/>
          <div class="userinfo">
            <p class="name">{{ userInfo.userName }}</p>
            <p class="access" v-for="roleName of userInfo.roleNameList">{{ roleName }}</p>
          </div>

          <div style="margin-left: 200px">
            <table style="border: 1px;text-align: right;width: 450px;margin-right: 20px">
              <tr>
                <td>原密码：</td>
                <td>
                  <el-input size="small" type="password" v-model="form.srcPassword"
                            placeholder="原密码"></el-input>
                </td>
              </tr>
              <tr>
                <td>输入新密码：</td>
                <td>
                  <el-input size="small" type="password" v-model="form.newPassword"
                            placeholder="新密码"></el-input>
                </td>
              </tr>
              <tr>
                <td>再次输入密码：</td>
                <td>
                  <el-input size="small" type="password" v-model="form.nextNewPassword"
                            placeholder="再次输入新密码"></el-input>
                </td>
                <td>
                  <el-button type="text" @click="updatePassword" style="margin-left: 20px">修改密码
                  </el-button>
                </td>
              </tr>
            </table>
          </div>
        </div>

        <div class="login-info">
          <p>上次登录时间：<span>{{ userInfo.ipCity }}</span></p>
          <p>上次登录地点：<span>{{ userInfo.loginTime }}</span></p>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import {mapState} from "vuex";
import MessageUtil from "../../utils/MessageUtil";
import {updatePassword} from "@/api/user";
import md5 from 'js-md5';
import DeepCopyUtil from "../../utils/DeepCopyUtil";

export default {
  data() {
    return {
      form: {
        srcPassword: '',
        newPassword: '',
        nextNewPassword: '',
      },
      ipAddress: '',
      loginTime: ''
    }
  },
  computed: {
    ...mapState('user', ['userInfo']),
  },
  methods: {
    updatePassword() {
      if (!this.form.srcPassword) {
        MessageUtil.error("原密码不能为空")
        return
      }
      if (!this.form.newPassword) {
        MessageUtil.error("新密码不能为空")
        return
      }
      if (!this.form.nextNewPassword) {
        MessageUtil.error("再次输入新密码不能为空")
        return
      }
      if (this.form.newPassword !== this.form.nextNewPassword) {
        MessageUtil.error("两次输入新密码不同")
        return
      }
      let form = DeepCopyUtil.copy(this.form);
      form.srcPassword = md5(form.srcPassword)
      form.newPassword = md5(form.newPassword)
      updatePassword(form).then(res => {
        if (res.code === 200) {
          MessageUtil.success("修改成功")
          this.$router.push({path: '/'});
        } else {
          MessageUtil.error(res.message)
        }
      }).catch(err => {
        MessageUtil.error("修改失败")
      })

    },
  },
  mounted() {
  },
  created() {
  }
}

</script>

<style lang="scss" scoped>
@import '~@/assets/scss/home';

.el-input {
  margin-top: 10px;
  width: 240px;
}

</style>
